<template>
    <div id="jurisdiction">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">系统设置</el-breadcrumb-item>
            <el-breadcrumb-item>菜单设置</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row v-for="(item,index) in menusList" :key="index">
                <el-col :span="24">
                    <el-form class="demo-form-inline" size="small">

                        <el-form-item>
                            <span class="el-icon-caret-right" v-if="item.juniorStatus==1"
                                  @click="lookJunior(index,item.id)"></span>
                            <span class="el-icon-caret-bottom" v-if="item.juniorStatus==0"
                                  @click="packUp(index,item.id)"></span>
                            <el-checkbox v-model="item.checked" style="margin:0 10px"></el-checkbox>
                            <span>{{item.name}}</span>
                        </el-form-item>
                        <el-form-item v-for="(memu2,index) in item.children" :key="index">
                            <el-checkbox v-model="memu2.checked"
                                         style="margin-left: 23px;margin-right: 10px"></el-checkbox>
                            <span>{{memu2.name}}</span>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-button type="primary" size="small" @click="submit">保存</el-button>
        </el-card>
    </div>
</template>

<script>
  export default {
    name: "roleJurisdiction",
    data() {
      return {
        menusList: [],
        id: '',
      }
    },
    created() {
      this.id = this.$route.query.id;
      this.getData();
    },
    methods: {
      //查看角色权限
      getData() {
        this.$axios.post('admin/role/rbac', {role_id: this.id, parent_id: 0}).then((res) => {
          let data = res.data;
          data.map((num) => {
            num.children = [];
            num.juniorStatus = 1
            if (num.checked == 1) {
              num.checked = true;
            } else {
              num.checked = false;
            }
          });
          this.menusList = res.data;
        });
      },
      // 查看下级
      lookJunior(index, id) {
        this.$axios.post('admin/role/rbac', {role_id: this.id, parent_id: id}).then((res) => {
          let data = res.data;
          if (data.length > 0) {
            data.map((num) => {
              if (num.checked == 1) {
                num.checked = true;
              } else {
                num.checked = false;
              }
            });
            this.menusList[index].children = data;
            this.menusList[index].juniorStatus = 0;
          } else {
            this.$message.success('暂无下级')
          }
        });
      },
      // 收起下级
      packUp(index) {
        this.menusList[index].children = [];
        this.menusList[index].juniorStatus = 1
      },
      submit() {
        let menu_ids = [];
        for (let i = 0; i < this.menusList.length; i++) {
          if (this.menusList[i].checked) {
            menu_ids.push(this.menusList[i].id)
          }
          for (let j = 0; j < this.menusList[i].children.length; j++) {
            if (this.menusList[i].children[j].checked) {
              menu_ids.push(this.menusList[i].children[j].id)
            }
          }
        }
        this.$axios.post('/admin/role/rbac_set', {role_id: this.id, menu_ids: menu_ids}).then((res) => {
          this.$message.success('成功');
          this.$router.go(-1);
        });
      }
    }
  }
</script>

<style scoped>

</style>